<template>
	<uv-tabbar :value="tabBarVal" @change="tabBarStore.changeTabBar" safeAreaInsetBottom activeColor="#FFCB30" inactiveColor="#fff" fixed
		placeholder :border="false">
		<uv-tabbar-item text="首页" name="index">
			<template v-slot:active-icon>
				<image class="icon" src="/static/images/tabBar/icon_shouye_02.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/images/tabBar/icon_shouye_01.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="绘画制作" name="draw">
			<template v-slot:active-icon>
				<image class="icon" src="/static/images/tabBar/icon_chuangzuo_02.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/images/tabBar/icon_chuangzuo_01.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="我的" name="user">
			<template v-slot:active-icon>
				<image class="icon" src="/static/images/tabBar/icon_wode_02.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="/static/images/tabBar/icon_wode_01.png"></image>
			</template>
		</uv-tabbar-item>
	</uv-tabbar>
</template>

<script setup>
	import {
		storeToRefs
	} from 'pinia'
	import {
		useTabBarStore
	} from "@/stores/useTabBarStore.js"

	// 获取pinia的数据
	const tabBarStore = useTabBarStore()
	
	// 从pinia的数据中结构出值并做响应式
	const {
		tabBarVal
	} = storeToRefs(tabBarStore)

</script>

<style lang="scss" scoped>

</style>